<template>
  <div>
    <slot name="header"></slot>
    <el-form v-bind="formConfig">
      <el-row v-if="formConfig?.formItems">
        <el-col v-bind="formConfig.colLayout">
          <template v-for="(item, index) in formConfig?.formItems">
            <el-form-item v-if="!item.isHidden" :label="item.label" :rules="item.rule" :style="formConfig.itemStyle"
              :key="index">
              <!-- 输入框/密码框 -->
              <template v-if="item.type === 'input' || item.type === 'password' || item.type === 'textarea'">

                <el-input v-bind="item.otherOptions" :type="item.type" :placeholder="item.placeholder"
                  :value="value[`${item.field}`]" @input='handleUpdate($event, item)'
                  :show-password="item.type === 'password'" />
              </template>
              <!-- 下拉框-->
              <template v-else-if="item.type === 'select'">
                <el-select placeholder="请选择" :value="value[`${item.field}`]" @input='handleUpdate($event, item)'
                  v-bind="item.otherOptions">
                  <el-option v-for="(option, index) in item.options" :label="option.title" :value="option.value"
                    :key="index">
                    {{ option.title }}
                  </el-option>
                </el-select>
              </template>
              <!-- 日期类型 -->
              <template v-else-if="item.type === 'datepicker'">
                <el-date-picker v-bind="item.otherOptions" :value="value[`${item.field}`]"
                  @input='handleUpdate($event, item)' />
              </template>
              <!--单选框  -->
              <template v-else-if="item.type === 'radio'">
                <el-radio-group :value="value[`${item.field}`] ?? item.defaultValue" @input='handleUpdate($event, item)'
                  v-bind="item.otherOptions">
                  <el-radio v-for="(option, index) in item.options" :label="option.value" :key="index">{{ option.title
                  }}
                  </el-radio>
                </el-radio-group>

              </template>
              <!--多选框  -->
              <template v-else-if="item.type === 'checkbox'">
                <el-checkbox-group :value="value[`${item.field}`] ?? item.defaultValue"
                  @input='handleUpdate($event, item)' v-bind="item.otherOptions">
                  <el-checkbox v-for="option in item.options" :key="option.value" :label="option.value">
                    {{ option.title }}
                  </el-checkbox>
                </el-checkbox-group>
              </template>
              <!--自动补全  -->
            </el-form-item>
          </template>

        </el-col>
      </el-row>
    </el-form>
    <slot name="footer"></slot>
  </div>

</template>

<script>
export default {
  props: {
    formConfig: {
      type: Object,
      required: true
    },
    value: {
      type: Object,
    }
  },
  methods: {
    handleUpdate(value, item) {
      // 手动调用 自动更新formaDataModel 的值实现双向数据绑定
      this.$emit('input', { ...this.value, [item.field]: value })
    }
  }

}
</script>

<style lang="less" scoped>

</style>
